<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="author" content="Cassie"/>
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
  <meta name="keywords" content=""/>
  <title>Form</title>
  <link rel="stylesheet" href="./css/form.css"/>
  <!-- link bootstrap -->
  <link rel="stylesheet" href="./css/bootstrap.min.css"/>
  
   
  
 </head>
 <body>
     <div class="container">
        <div class="col-md-offset-2 col-md-7">
            <h2>用户注册页面</h2>
            <form action="myPhp.php" class="form-horizontal" id="myForm" method="post" >
                <div class="form-group">
                    <label for="myName" class="col-md-2 control-label">用户名：</label>
                    <div class="col-md-6">
                        <input type="username" class="form-control" id="myName" name="username">
                    </div>
                </div>
                <div class="form-group">
                    <label for="myPassword" class="col-md-2 control-label">密码：</label>
                    <div class="col-md-6">
                        <input type="password" class="form-control" id="myPassword" name="password">
                    </div>
                </div>
                <div class="form-group" >
                    <label class="col-md-2 control-label">性别：</label>
                    <div class="col-md-10" id="sexy">
                        <div class="radio-inline">
                            <label>
                                <input type="radio"  name="gender" id="myOption1"  data-bv-field="gender">
                                男
                            </label>
                        </div>
                        <div class="radio-inline">
                            <label>
                                <input type="radio"  name="gender" id="myOption2"  data-bv-field="gender">
                                女
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">爱好：</label>
                    <div class="col-md-10" id="habbit">
                        <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox1" value="option1" name="languages">听音乐
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox2" value="option2" name="languages">看电影
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" id="inlineCheckbox3" value="option3" name="languages" >玩游戏
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">城市：</label>
                    <div class="col-md-3" >
                        <select class="form-control degree" name="country" >
                            <option value="null">请选择</option>
                            <option value="beijing">北京</option>
                            <option value="shanghai">上海</option>
                            <option value="guangzhou">广州</option>
                        </select>
                    </div>
                </div>    
                <div class="form-group">
                    <label for="myFile" class="col-md-2 control-label">照片：</label>
                    <div class="col-md-10">
                        <input type="file" id="myFile" name="firstFile">
                    </div>
                </div>
                <div class="form-group">
                    <label for="myFile" class="col-md-2 control-label">个人简介：</label>
                    <div class="col-md-10">
                        <textarea class="form-control" rows="3" name="bio"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary" name="sub">提交</button>
                    </div>
                </div>
            </form>
        </div>
     </div>
     <script src="./js/bootstrap.min.js"></script>
     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 </body>
 </html>

 <script>
     $(function(){
         
         $("#myForm [name=username]").blur(function(){
             //console.log($(this).val().match(/[^(a-zA-Z0-9_\.)]/)!=null)
             if($(this).val().match(/[^(a-zA-Z0-9_\.)]/)!=null){
                alert("用户名只能是字母数字下划线！")
                
             }
             if($(this).val().length<6 || $(this).val().length>10){
                alert("用户名长度为6到10")
                
            }
         })

         $("#myForm [name=password]").blur(function(){
            if($(this).val().match(/[^(a-zA-Z0-9_\.)]/)!=null){
                alert("密码只能是字母数字下划线！")
            }
            if($(this).val().length<6 || $(this).val().length>10){
                alert("密码长度为6到10")
                return false;
            }
         })
        

         $("#myForm [name=country]").blur(function(){
            if($(this).val()=="null"){
                alert('请选择城市');
            }
         })
         //console.log($("#myForm [name=sub]"))
         $("#myForm [name=sub]").click(function(){
            if($("#myForm [name=username]").val().length==0){
                alert("请输入用户名")
                return false;
            }
            if($("#myForm [name=username]").val().length<6 || $("#myForm [name=username]").val().length>10){
                alert("用户名长度为6到10")
                return false;
            }
            if($("#myForm [name=username]").val().match(/[^(a-zA-Z0-9_\.)]/)!=null){
                alert("用户名只能是字母数字下划线！")
            }
            
            if($("#myForm [name=password]").val().length==0){
                alert("请输入密码")
                return false;
            }
            if($("#myForm [name=password]").val().length<6 || $("#myForm [name=password]").val().length>10){
                alert("密码长度为6到10")
                return false;
            }
            if($("#myForm [name=password]").val().match(/[^(a-zA-Z0-9_\.)]/)!=null){
                alert("密码只能是字母数字下划线！")
                return false;
            }
            
            
         })

     })



 </script>